{% extends "base.html" %}

{% block title %}{{ student.name }} - 学生信息 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .student-info-container {
        max-width: 1000px;
        margin: 0 auto;
    }
    .student-profile-header {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 2rem;
        margin-bottom: 2rem;
        display: flex;
        gap: 2rem;
        align-items: flex-start;
    }
    .student-avatar {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #f8f9fa;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        flex-shrink: 0;
    }
    .student-profile-info {
        flex: 1;
    }
    .student-name {
        font-size: 1.75rem;
        font-weight: 700;
        color: #495057;
        margin-bottom: 0.5rem;
    }
    .student-id {
        font-size: 1rem;
        color: #6c757d;
        margin-bottom: 1rem;
    }
    .student-education-info {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        margin-bottom: 1.5rem;
    }
    .student-education-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .student-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .student-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 1rem;
        font-size: 0.75rem;
        font-weight: 500;
        text-decoration: none;
    }
    .student-badge.primary {
        background-color: #e3f2fd;
        color: #1976d2;
    }
    .student-badge.success {
        background-color: #e8f5e9;
        color: #388e3c;
    }
    .student-badge.warning {
        background-color: #fff3e0;
        color: #f57c00;
    }
    .student-badge.danger {
        background-color: #ffebee;
        color: #d32f2f;
    }
    .student-actions {
        display: flex;
        gap: 1rem;
        align-self: flex-start;
    }
    .action-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        background-color: white;
        color: #495057;
        cursor: pointer;
        transition: all 0.2s;
    }
    .action-btn:hover {
        background-color: #f8f9fa;
        border-color: #adb5bd;
    }
    .action-btn.primary {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    .action-btn.primary:hover {
        background-color: #0056b3;
        border-color: #004085;
    }
    .section {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 2rem;
        margin-bottom: 2rem;
    }
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #495057;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    .info-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    .info-label {
        font-size: 0.875rem;
        color: #6c757d;
        font-weight: 500;
    }
    .info-value {
        font-size: 1rem;
        color: #495057;
    }
    .info-table {
        width: 100%;
        border-collapse: collapse;
    }
    .info-table th,
    .info-table td {
        padding: 1rem;
        text-align: left;
        border-bottom: 1px solid #e9ecef;
    }
    .info-table th {
        font-weight: 600;
        color: #495057;
        background-color: #f8f9fa;
    }
    .info-table tr:hover {
        background-color: #f8f9fa;
    }
    .tab-container {
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 2rem;
    }
    .tabs {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .tab {
        margin-bottom: -1px;
    }
    .tab-link {
        display: block;
        padding: 1rem 1.5rem;
        text-decoration: none;
        color: #6c757d;
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        transition: all 0.2s;
    }
    .tab-link:hover {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #495057;
    }
    .tab-link.active {
        background-color: white;
        border-color: #dee2e6 #dee2e6 white;
        color: #495057;
        font-weight: 600;
    }
    .progress-card {
        background-color: #f8f9fa;
        border-radius: 0.5rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .progress-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }
    .progress-title {
        font-weight: 600;
        color: #495057;
    }
    .progress-value {
        font-weight: 700;
        color: #007bff;
    }
    .progress-bar-container {
        width: 100%;
        height: 0.75rem;
        background-color: #e9ecef;
        border-radius: 0.375rem;
        overflow: hidden;
    }
    .progress-bar {
        height: 100%;
        background-color: #007bff;
        transition: width 0.6s ease;
        border-radius: 0.375rem;
    }
    .tag-item {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.3rem 0.8rem;
        border-radius: 1rem;
        background-color: #e9ecef;
        color: #495057;
        font-size: 0.875rem;
        margin-right: 0.75rem;
        margin-bottom: 0.75rem;
    }
    .tag-item.primary {
        background-color: #e3f2fd;
        color: #1976d2;
    }
    .tag-item.success {
        background-color: #e8f5e9;
        color: #388e3c;
    }
    .tag-item.warning {
        background-color: #fff3e0;
        color: #f57c00;
    }
    .tag-item.danger {
        background-color: #ffebee;
        color: #d32f2f;
    }
    .alert {
        padding: 1rem;
        border-radius: 0.25rem;
        margin-bottom: 1.5rem;
    }
    .alert-success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    .alert-danger {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    .alert-warning {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }
    .alert-info {
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }
    /* 响应式设计 */
    @media (max-width: 768px) {
        .student-info-container {
            padding: 0 1rem;
        }
        .student-profile-header {
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 1.5rem 1rem;
        }
        .student-avatar {
            width: 120px;
            height: 120px;
        }
        .student-education-info {
            justify-content: center;
        }
        .student-actions {
            width: 100%;
            justify-content: center;
        }
        .section {
            padding: 1.5rem 1rem;
        }
        .section-header {
            flex-direction: column;
            gap: 1rem;
            align-items: stretch;
        }
        .info-grid {
            grid-template-columns: 1fr;
        }
        .tabs {
            overflow-x: auto;
        }
        .tab-link {
            white-space: nowrap;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">
        <i class="fa fa-user mr-2 text-primary"></i>学生信息
    </h1>
    <p class="text-gray-600">查看和管理个人信息</p>
</div>

<!-- 消息提示区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="student-info-container">
    <!-- 学生个人资料头部 -->
    <div class="student-profile-header">
        <img src="https://via.placeholder.com/150?text=学" alt="学生头像" class="student-avatar">
        <div class="student-profile-info">
            <h1 class="student-name">张明</h1>
            <div class="student-id">学号: 2021030101</div>
            <div class="student-education-info">
                <div class="student-education-item">
                    <i class="fa fa-graduation-cap text-primary"></i>
                    <span>计算机科学与技术</span>
                </div>
                <div class="student-education-item">
                    <i class="fa fa-users text-primary"></i>
                    <span>2021级 01班</span>
                </div>
                <div class="student-education-item">
                    <i class="fa fa-calendar text-primary"></i>
                    <span>2021-09-01 入学</span>
                </div>
                <div class="student-education-item">
                    <i class="fa fa-flag text-primary"></i>
                    <span>预计毕业: 2025-07-01</span>
                </div>
            </div>
            <div class="student-badges">
                <span class="student-badge primary">优秀学生</span>
                <span class="student-badge success">奖学金获得者</span>
                <span class="student-badge warning">学生会成员</span>
                <span class="student-badge danger">计算机社团骨干</span>
            </div>
        </div>
        <div class="student-actions">
            <button id="edit-profile-btn" class="action-btn primary">
                <i class="fa fa-pencil"></i>
                <span>编辑资料</span>
            </button>
            <button id="print-profile-btn" class="action-btn">
                <i class="fa fa-print"></i>
                <span>打印</span>
            </button>
        </div>
    </div>
    
    <!-- 标签页导航 -->
    <div class="tab-container">
        <ul class="tabs">
            <li class="tab"><a href="#basic-info" class="tab-link active" data-toggle="tab">基本信息</a></li>
            <li class="tab"><a href="#contact-info" class="tab-link" data-toggle="tab">联系方式</a></li>
            <li class="tab"><a href="#education-info" class="tab-link" data-toggle="tab">教育背景</a></li>
            <li class="tab"><a href="#achievements" class="tab-link" data-toggle="tab">奖惩记录</a></li>
            <li class="tab"><a href="#progress" class="tab-link" data-toggle="tab">学业进度</a></li>
        </ul>
    </div>
    
    <!-- 标签页内容 -->
    <div class="tab-content">
        <!-- 基本信息标签页 -->
        <div id="basic-info" class="tab-pane active">
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-id-card text-primary"></i>
                        个人基本信息
                    </h2>
                </div>
                <div class="info-grid">
                    <div class="info-item">
                        <div class="info-label">姓名</div>
                        <div class="info-value">张明</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">性别</div>
                        <div class="info-value">男</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">出生日期</div>
                        <div class="info-value">2003-05-15</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">民族</div>
                        <div class="info-value">汉族</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">政治面貌</div>
                        <div class="info-value">共青团员</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">身份证号</div>
                        <div class="info-value">110101********1234</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">籍贯</div>
                        <div class="info-value">北京市海淀区</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">健康状况</div>
                        <div class="info-value">良好</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 联系方式标签页 -->
        <div id="contact-info" class="tab-pane">
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-envelope text-primary"></i>
                        联系方式
                    </h2>
                </div>
                <div class="info-grid">
                    <div class="info-item">
                        <div class="info-label">手机号码</div>
                        <div class="info-value">138****1234</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">电子邮箱</div>
                        <div class="info-value">zhangming@example.com</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">校园邮箱</div>
                        <div class="info-value">2021030101@school.edu.cn</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">宿舍</div>
                        <div class="info-value">学生公寓A栋 405室</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">紧急联系人</div>
                        <div class="info-value">张父</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">紧急联系电话</div>
                        <div class="info-value">139****5678</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 教育背景标签页 -->
        <div id="education-info" class="tab-pane">
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-graduation-cap text-primary"></i>
                        教育背景
                    </h2>
                </div>
                <table class="info-table">
                    <thead>
                        <tr>
                            <th>教育阶段</th>
                            <th>学校名称</th>
                            <th>入学日期</th>
                            <th>毕业日期</th>
                            <th>专业/班级</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>本科</td>
                            <td>XX大学</td>
                            <td>2021-09-01</td>
                            <td>2025-07-01 (预计)</td>
                            <td>计算机科学与技术</td>
                        </tr>
                        <tr>
                            <td>高中</td>
                            <td>XX市第一中学</td>
                            <td>2018-09-01</td>
                            <td>2021-07-01</td>
                            <td>理科班</td>
                        </tr>
                        <tr>
                            <td>初中</td>
                            <td>XX市实验中学</td>
                            <td>2015-09-01</td>
                            <td>2018-07-01</td>
                            <td>初中部</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 奖惩记录标签页 -->
        <div id="achievements" class="tab-pane">
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-trophy text-primary"></i>
                        奖励记录
                    </h2>
                </div>
                <table class="info-table">
                    <thead>
                        <tr>
                            <th>奖励名称</th>
                            <th>级别</th>
                            <th>获得日期</th>
                            <th>颁奖单位</th>
                            <th>备注</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>国家奖学金</td>
                            <td>国家级</td>
                            <td>2023-11-01</td>
                            <td>教育部</td>
                            <td>年度优秀学生</td>
                        </tr>
                        <tr>
                            <td>校级一等奖学金</td>
                            <td>校级</td>
                            <td>2023-09-01</td>
                            <td>XX大学</td>
                            <td>优秀学生</td>
                        </tr>
                        <tr>
                            <td>校级优秀学生干部</td>
                            <td>校级</td>
                            <td>2022-12-01</td>
                            <td>XX大学</td>
                            <td>学生会工作表现突出</td>
                        </tr>
                        <tr>
                            <td>ACM程序设计竞赛校级一等奖</td>
                            <td>校级</td>
                            <td>2023-05-01</td>
                            <td>XX大学计算机学院</td>
                            <td>编程能力突出</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-warning text-primary"></i>
                        处分记录
                    </h2>
                </div>
                <div style="text-align: center; padding: 2rem; color: #6c757d;">
                    <i class="fa fa-check-circle text-success" style="font-size: 2rem; margin-bottom: 1rem;"></i>
                    <p>暂无处分记录</p>
                </div>
            </div>
        </div>
        
        <!-- 学业进度标签页 -->
        <div id="progress" class="tab-pane">
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-line-chart text-primary"></i>
                        总体学业进度
                    </h2>
                </div>
                <div class="info-grid">
                    <div class="info-item">
                        <div class="info-label">已修学分</div>
                        <div class="info-value">85 / 120</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">平均学分绩点</div>
                        <div class="info-value">3.8 / 4.0</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">已修课程数</div>
                        <div class="info-value">42 / 60</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">未修课程数</div>
                        <div class="info-value">18</div>
                    </div>
                </div>
                
                <div class="progress-card">
                    <div class="progress-header">
                        <div class="progress-title">总学分完成进度</div>
                        <div class="progress-value">70.8%</div>
                    </div>
                    <div class="progress-bar-container">
                        <div class="progress-bar" style="width: 70.8%;"></div>
                    </div>
                </div>
                
                <div class="progress-card">
                    <div class="progress-header">
                        <div class="progress-title">课程完成进度</div>
                        <div class="progress-value">70.0%</div>
                    </div>
                    <div class="progress-bar-container">
                        <div class="progress-bar" style="width: 70%;"></div>
                    </div>
                </div>
            </div>
            
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-book text-primary"></i>
                        专业课程完成情况
                    </h2>
                </div>
                <table class="info-table">
                    <thead>
                        <tr>
                            <th>课程类型</th>
                            <th>已修课程</th>
                            <th>未修课程</th>
                            <th>完成率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>专业基础课</td>
                            <td>12</td>
                            <td>0</td>
                            <td>100%</td>
                        </tr>
                        <tr>
                            <td>专业核心课</td>
                            <td>8</td>
                            <td>4</td>
                            <td>66.7%</td>
                        </tr>
                        <tr>
                            <td>专业选修课</td>
                            <td>6</td>
                            <td>8</td>
                            <td>42.9%</td>
                        </tr>
                        <tr>
                            <td>公共基础课</td>
                            <td>10</td>
                            <td>2</td>
                            <td>83.3%</td>
                        </tr>
                        <tr>
                            <td>公共选修课</td>
                            <td>6</td>
                            <td>4</td>
                            <td>60.0%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-tags text-primary"></i>
                        技能标签
                    </h2>
                </div>
                <div class="tags-container">
                    <div class="tag-item primary">
                        <i class="fa fa-code"></i>
                        <span>Java</span>
                    </div>
                    <div class="tag-item primary">
                        <i class="fa fa-code"></i>
                        <span>Python</span>
                    </div>
                    <div class="tag-item primary">
                        <i class="fa fa-code"></i>
                        <span>C++</span>
                    </div>
                    <div class="tag-item success">
                        <i class="fa fa-database"></i>
                        <span>MySQL</span>
                    </div>
                    <div class="tag-item success">
                        <i class="fa fa-database"></i>
                        <span>MongoDB</span>
                    </div>
                    <div class="tag-item warning">
                        <i class="fa fa-desktop"></i>
                        <span>Web开发</span>
                    </div>
                    <div class="tag-item warning">
                        <i class="fa fa-mobile"></i>
                        <span>移动应用开发</span>
                    </div>
                    <div class="tag-item danger">
                        <i class="fa fa-shield"></i>
                        <span>网络安全</span>
                    </div>
                    <div class="tag-item primary">
                        <i class="fa fa-cogs"></i>
                        <span>数据结构与算法</span>
                    </div>
                    <div class="tag-item success">
                        <i class="fa fa-server"></i>
                        <span>Linux系统</span>
                    </div>
                    <div class="tag-item warning">
                        <i class="fa fa-cloud"></i>
                        <span>云计算</span>
                    </div>
                    <div class="tag-item danger">
                        <i class="fa fa-brain"></i>
                        <span>人工智能基础</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 获取DOM元素
    const tabLinks = document.querySelectorAll('.tab-link');
    const tabPanes = document.querySelectorAll('.tab-pane');
    const editProfileBtn = document.getElementById('edit-profile-btn');
    const printProfileBtn = document.getElementById('print-profile-btn');
    
    // 标签页切换功能
    tabLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除所有标签页的活动状态
            tabLinks.forEach(l => l.classList.remove('active'));
            tabPanes.forEach(p => p.classList.remove('active'));
            
            // 为当前点击的标签页添加活动状态
            this.classList.add('active');
            
            // 显示对应的标签页内容
            const targetId = this.getAttribute('href').substring(1);
            const targetPane = document.getElementById(targetId);
            if (targetPane) {
                targetPane.classList.add('active');
            }
            
            // 添加切换动画效果
            tabPanes.forEach(pane => {
                if (pane.classList.contains('active')) {
                    pane.style.opacity = '0';
                    pane.style.transform = 'translateY(10px)';
                    pane.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                    
                    setTimeout(() => {
                        pane.style.opacity = '1';
                        pane.style.transform = 'translateY(0)';
                    }, 50);
                }
            });
        });
    });
    
    // 编辑资料按钮点击事件
    editProfileBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该跳转到编辑资料页面或弹出编辑资料模态框
        alert('编辑资料功能将在后续版本中实现');
    });
    
    // 打印按钮点击事件
    printProfileBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该触发打印功能
        window.print();
    });
    
    // 页面载入动画
    document.addEventListener('DOMContentLoaded', function() {
        // 学生信息头部动画
        const profileHeader = document.querySelector('.student-profile-header');
        if (profileHeader) {
            profileHeader.style.opacity = '0';
            profileHeader.style.transform = 'translateY(20px)';
            profileHeader.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            
            setTimeout(() => {
                profileHeader.style.opacity = '1';
                profileHeader.style.transform = 'translateY(0)';
            }, 300);
        }
        
        // 标签页内容动画
        const activeTabPane = document.querySelector('.tab-pane.active');
        if (activeTabPane) {
            activeTabPane.style.opacity = '0';
            activeTabPane.style.transform = 'translateY(20px)';
            activeTabPane.style.transition = 'opacity 0.6s ease 600ms, transform 0.6s ease 600ms';
            
            setTimeout(() => {
                activeTabPane.style.opacity = '1';
                activeTabPane.style.transform = 'translateY(0)';
            }, 900);
        }
        
        // 进度条动画
        const progressBars = document.querySelectorAll('.progress-bar');
        progressBars.forEach(bar => {
            const width = bar.style.width;
            bar.style.width = '0';
            
            setTimeout(() => {
                bar.style.width = width;
            }, 1500);
        });
    });
</script>
{% endblock %}